<template>
  <view class="beauty-ranking">
    <view class="section-header">
      <text class="section-title">优美排行</text>
    </view>
    <view class="ranking-content">
      <view class="ranking-item" @click="onDoctorRankingClick">
        <image src="/static/doctor_ranking.jpg" mode="aspectFill"></image>
        <text class="item-title">医生榜</text>
      </view>
      <view class="ranking-item" @click="onHospitalRankingClick">
        <image src="/static/hospital_ranking.jpg" mode="aspectFill"></image>
        <text class="item-title">机构榜</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    onDoctorRankingClick() {
      this.$emit('doctor-ranking-click')
    },
    onHospitalRankingClick() {
      this.$emit('hospital-ranking-click')
    }
  }
}
</script>

<style scoped>
.beauty-ranking {
  width: 100%;
  margin-top: 10px;
  padding: 15px;
  background-color: #FFF;
}

.section-header {
  margin-bottom: 10px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.ranking-content {
  display: flex;
  justify-content: space-between;
}

.ranking-item {
  width: calc(50% - 5px);
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

image {
  width: 100%;
  height: 120px;
}

.item-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #FFF;
  background-color: rgba(0,0,0,0.5);
}
</style>